﻿<%@ Page Title="" Language="C#" MasterPageFile="~/YUIAspNet.Master" AutoEventWireup="true" CodeBehind="CellFormatter.aspx.cs" Inherits="YUIAspNetDemo.DataTable.ColumnFormatter" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <title>YUIAsp.Net Controls : LiveDemo : DataTable : Cell formatter</title>
    <script type="text/javascript">
        function myCustomFormat(elCell, oRecord, oColumn, oData) {
            var item = oRecord.getData("For");
            elCell.innerHTML = item;

            if (item == "car")
                elCell.style.color = "#ff0000";
            else if (item == "bike")
                elCell.style.color = "#00ff00";
            else
                elCell.style.color = "#0000ff";
        }
</script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <h1>Cell formatter</h1>
    
    <p>Using cell formatting, you have complete complete control over what gets rendered in the DataTable's cell.</p>
    
    <p>You can specify a formatter for a column by setting a JavascriptFunctionFormat as the column's TemplateFormat property.</p>
    
    <p>In this example, the "For" property uses a custom format which sets the color of the row with the value "car" to Red, the color of the row with value "bike" to green, and all other items' color to Blue.</p>
    
     <yui:DataTable id="dt" runat="server">
        <Columns>
            <yui:DataTableColumn Key="DatePaid" Sortable="true" Resizeable="true" Text="Date Paid" />
            <yui:DataTableColumn Key="Amount" Resizeable="true" />
            <yui:DataTableColumn Key="PaidTo" />
            <yui:DataTableColumn Key="Remaining" />
            <yui:DataTableColumn Key="For" />
        </Columns>
    </yui:DataTable>
</asp:Content>
